<template>
<div class="col-md-12">
  <vid-layout-detail></vid-layout-detail>
  <vid-layout-switch-detail></vid-layout-switch-detail>
  <vid-layout-auto-switch></vid-layout-auto-switch>
  <my-navbar>
    <template slot="left">   
      <select-lcd :on-change="onLcdChange"></select-lcd>
    </template> 
    <template slot="right">    
      <button class="btn btn-default" @click.prevent="onShowAutoSwitch">
        <span class="glyphicon glyphicon-retweet"></span> {{$t('autoswitch.title')}}
      </button>
      <button class="btn btn-default" @click.prevent="onSaveSwtichLayouts" :disabled="switchLayout.enable === 1">
        <span class="glyphicon glyphicon-save"></span> {{$t('autoswitch.save')}}
      </button> 
      <button class="btn btn-default" @click.prevent="onShowSwitch" v-if="false">
        <span class="glyphicon glyphicon-retweet"></span> {{$t('switch.title')}}
      </button>
      <button class="btn btn-default" @click.prevent="onRefresh">
        <span class="glyphicon glyphicon-refresh"></span> {{$t('common.refresh')}}
      </button>          
    </template> 
  </my-navbar>  
  <div class="col-md-12">
    <my-table :cfg="cfg" 
      :list="list" 
      :loading="vidlayout.loading"
      :set-checked="setVidLayoutChecked"></my-table>
  </div>
</div>
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import {printObj} from 'libs/utils.js'
import locales from '../locales/vidLayout.js'
import VidLayoutDetail from './VidLayoutDetail.vue'
import VidLayoutSwitchDetail from './VidLayoutSwitchDetail.vue'
import VidLayoutAutoSwitch from './VidLayoutAutoSwitch.vue'
import {List} from '../configs/vidLayout.js'
import {multimediaApi, mediaPhyApi} from 'share/server/api.js'
import {loadLcdLayoutByName} from 'share/server/utils.js'
import * as actions from 'share/server/vuex/actions/multimedia.js'
import SelectLcd from 'share/server/components/SelectLcd.vue'
import {currLcdInfo} from 'share/server/vuex/getters.js'

export default {
  locales,
  components: {
    'select-lcd': SelectLcd,
    'vid-layout-detail': VidLayoutDetail,
    'vid-layout-switch-detail': VidLayoutSwitchDetail,
    'vid-layout-auto-switch': VidLayoutAutoSwitch,
  },
  vuex: {
    getters: {
      currLcdInfo,
      vidlayout: (state) => state.vidlayout,
      modes: (state) => state.lcd.modes,
      lcdTopoDev: (state) => state.lcd.topoDev,
      switchLayout: (state) => state.lcd.switchLayout
    },
    actions
  },
  computed: {
    list () {
      if (this.lcdTopoDev.topoId > 0) {
        let lcdInfo = this.currLcdInfo
        return _.filter(this.vidlayout.list, {
          multiScreen: `${lcdInfo.multiScreenX}x${lcdInfo.multiScreenY}`
        })  
      } else {
        return this.vidlayout.list
      }
    }
  },
  data () {
    return {
      cfg: {
        checkable: true,
        showHead: true,
        columns: new List(this),
        operation: {
          name: this.$t("common.operation"),
          width: 'auto',
          actions: [{
            icon: 'glyphicon glyphicon-trash',
            doClick: this.onDel
          }, {
            icon: 'glyphicon glyphicon-edit',
            doClick: this.onShowDetail
          }, {
            icon: 'glyphicon glyphicon-play',
            doClick: this.onLoadVidLayoutByName
          }]
        }        
      }
    }
  },
  methods: {
    getSwtichLayouts () {
      if (this.lcdTopoDev.topoId > 0) {
        mediaPhyApi.setDevId(this.lcdTopoDev.topoId)
        mediaPhyApi.sendCmd('getSwtichLayouts').then(function(res) {
          if (res && res.data && res.data.code === 0) {
            let layouts = res.data.data.layouts
            if (layouts.length > 0) {
              _.forEach(this.list, function(item) {
                if (_.includes(layouts, item.name)) {
                  this.setVidLayoutChecked(item._id, true)
                }
              }.bind(this))              
            }
          }
        }.bind(this))         
      }
    },
    onLcdChange () {
      this.setVidLayoutAllUnchecked()
      this.getSwtichLayouts()   
    },
    onShowDetail (item) {
      ebus.emit('show-vid-layout-detail', item)
    },
    onShowAutoSwitch () {
      ebus.emit('show-vid-layout-auto-switch')
    },
    saveSwtichLayouts (layouts) {
      mediaPhyApi.setDevId(this.lcdTopoDev.topoId)
      mediaPhyApi.sendCmd('setSwtichLayouts', {layouts})
      .then(function(res) {
        if (res && res.data && res.data.code === 0) {
          toast.s(this, this.$t('common.success'), '')
        } else {
          toast.code(this, res.data)
        }            
      }.bind(this))
    },
    onSaveSwtichLayouts () {
      if (this.lcdTopoDev.topoId < 0) {
        toast.e(this, this.$t('common.fail'), this.$t('error.invalidLcd'))
        return
      }
      let selected = _.filter(this.list, {_checked: true})
      let selectedLayouts = _.map(selected, 'name')
      this.saveSwtichLayouts(selectedLayouts)
    },
    onShowSwitch () {
      let count = _.countBy(this.list, (item) => {
        return item._checked ? 'checked': 'unchecked'
      })
      if (!count.checked) {
        toast.e(this, this.$t('common.fail'), this.$t('error.unselected'))
        return
      }
      if (this.lcdTopoDev.topoId < 0) {
        toast.e(this, this.$t('common.fail'), this.$t('error.invalidLcd'))
        return
      }
      ebus.emit('show-vid-layout-switch')
    },
    onLoadVidLayoutByName (item) {
      let layout = item
      let lcdInfo = this.currLcdInfo
      loadLcdLayoutByName(lcdInfo.topoId, layout.name).then(function(res) {
        if (res && res.data && res.data.code === 0) {

        } else {
          toast.code(this, res.data)
        }
      }.bind(this))
    },
    onRefresh () {
      this.doLoadVidLayouts()
    },
    onDel (item) {
      msgbox.alert({
        title: this.$t('alert.areYouSure'),
        text: this.$t('alert.notBeRecovered'),
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        cancelButtonText: this.$t('common.cancel'),
        confirmButtonText: this.$t('common.confirm'),
        closeOnConfirm: false        
      }, 
      function() {
        multimediaApi.delItem('vidLayouts', item._id).then(function(res) {
          if (res && res.data && res.data.code === 0) {
            this.doLoadVidLayouts()
          } else {
            toast.code(this, res.data)
          }
          msgbox.close()
        }.bind(this))
      }.bind(this))
    }
  },
  ready () {
    this.getSwtichLayouts()
  }
}
</script>

<style>
</style>